<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="img/titlelogo.jpg" rel="icon" type="image/x-ico">
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<title>LC</title>
		 
		<style>
			.carousel-control-prev, .carousel-control-next {
				opacity: 1;
				width: 8%;
			}
			body {
				/* overflow: -Scroll;
				overflow-x: hidden; */
				background-color: #F2F3F5;
				font-family: "century gothic";
			}
		</style>
	</head>
	<body>
		<div id="loading-cover">
			<div class="loading">
				<span>loading...</span>
			</div>
		</div>
		
		<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="topNavigation">
			<a class="navbar-brand" href="#">
				<img src="img/logo.png" width="120px" />
			</a>
			<button class="navbar-toggler" type="buttomenun" data-toggle="collapse" data-target="#collapsibleNavbar" id="menuBtn">
				Menu
				<i class="fa fa-bars"></i>
			</button>
			<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
				<ul class="navbar-nav text-center" id="my-navbar">
					<li class="nav-item">
						<a class="nav-link" href="#top-banner">主 页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#intro-part">致 信</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#icon-text">期 望</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#our-story">愿 景</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#photo-collection">相 片</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#me-you-container">&</a>
					</li>
				</ul>
			</div>
		</nav>

		<section id="top-banner">
			<div id="demo" class="carousel slide" data-ride="carousel">
				<div id="our-title">
					<div id="title">我 们 一 起 走 过 的</div>
					<div id="title2">我们一起走过的</div>
					<div class="simply-countdown simply-countdown-one"></div>
				</div>
				<div id="top-carousel-text">
					<h3>One Year</h3>
					<p>Chen & Min</p>
				</div>
				<!-- 指示符 -->
				<ul class="carousel-indicators">
					<li data-target="#demo" data-slide-to="0" class="active"></li>
					<li data-target="#demo" data-slide-to="1"></li>
					<li data-target="#demo" data-slide-to="2"></li>
				</ul>
				<!-- 轮播图片 -->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="img/top-carousel-1.jpg">
					</div>
					<div class="carousel-item">
						<img src="img/top-carousel-2.jpg">
						<div class="carousel-caption">
						</div>
					</div>
					<div class="carousel-item">
						<img src="img/top-carousel-3.jpg">
						<div class="carousel-caption">
						</div>
					</div>
				</div>
				<!-- 左右切换按钮 -->
				<a class="carousel-control-prev" href="#demo" data-slide="prev">
					<!-- <span class="carousel-control-prev-icon"></span> -->
					<i class="fa fa-chevron-left"></i>
				</a>
				<a class="carousel-control-next" href="#demo" data-slide="next">
					<!-- <span class="carousel-control-next-icon"></span> -->
					<i class="fa fa-chevron-right"></i>
				</a>
			</div>
		</section>

		<div class="container-fluid" id="intro-part">
			<div class="row">
				<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
					<div id="text-box">
						<h2 style="text-align: center;">
							<span style="border-top: 1.5px solid #f14e95; border-bottom: 1.5px solid #f14e95;">
								<li class="fa fa-heart-o"></li>
								一篇不正经的信
								<li class="fa fa-heart-o"></li>
							</span>
						</h2>
						<h4 style="margin-top: 20px;">From 陈</h4>
						<p>
							好吧！到了发挥文采的时候了，虽然本人内心是拒绝的，毕竟肚子里全是代码的程序员实在挤不出
							半点墨水，但是看到这么一个小可爱，我就勉强挤挤墨水吧（强行解释一波（๑￫‿ฺ￩๑））。
						</p>
						<p>
							咳咳！一年了耶，挺快的哈，分分合合的，哈哈，但是这也阻挡不了我们在一起。程序员不懂烂漫，唯有
							手下键盘抠出的代码一表心意，总之先讨好，万一哪天真秃了，就可以赖着你了 ( ◔ ڼ ◔ ) 
						</p>
						<p>
							一年了，看过了你的可爱，了解了你的脾气，也知道你人前坚强人后脆弱的模样。我们这一路走来，经受过坎坷，
							享受过快乐，也习惯了各自互相陪伴的感觉，仿佛一切都转瞬即逝，从相遇相识，到一年光阴地逝去，都像是在
							告诉我，如果不去珍惜，她，就真地有可能会消失啊，但是现在看来，你好像已经被我攻陷了，biubiu~
						</p>
						<p>
							嘻嘻，你说我没给你写过情书，你这是在为难我这个理科直男呀，虽然情书没有，但是周年纪念网页还是可以安排上的，
							这也是我的一片诚意啊，图文并茂，虽然文笔差点，咱就将就下哈，或许多年以后我们回头来看时，也会让这段岁月更
							清晰地涌入脑海，到那时，吐槽也好、感叹也好，也是我们人生里美丽的风景...
						</p>
						<p>
							我感恩去年今日的遇见，感恩今时今日的陪伴，也期待未来将来的美好，希望我们的互相陪伴，都能给各自的生活带来
							不一样的精彩...
						</p>
						<h4 style="text-align: right;">To 敏</h4>
					</div>
				</div>
				
				<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
					<img src="img/picture-1.jpg" id="picture-box" class="img-fluid" />
				</div>
			</div>
		</div>
		
		<div class="container-fluid" id="icon-text">
			<div class="row">
				<div class="col-md-12" id="icon-text-title">
					<div style="border-bottom: white 1.5px solid; border-top: white 1.5px solid;">其实啊！我希望...</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="icon-text-item">
					<i class="fa fa-home"></i>
					<h1>一  屋</h1>
					<h3>A Home</h3>
				</div>
				
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="icon-text-item">
					<i class="fa fa-venus-mars"></i>
					<h1>两  人</h1>
					<h3>You & Me</h3>
				</div>
				
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="icon-text-item">
					<i class="fa fa-cutlery"></i>
					<h1>三  餐</h1>
					<h3>Three Meals</h3>
				</div>
				
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="icon-text-item">
					<i class="fa fa-calendar"></i>
					<h1>四  季</h1>
					<h3>Four Seasons</h3>
				</div>
			</div>
		</div>
		
		<!-- <div class="container-fluid" style="height: 500px; background-color: #000000;">22</div> -->
		
		<div class="container" id="our-story">
			<div class="row">
				<div class="col-md-12 text-center">
					<h2>
						<span style="border-bottom: #f14e95 1.5px solid; border-top: #f14e95 1.5px solid;">不如，说说未来</span>
					</h2>
					<p>斯人如宝藏，呐，我就是这样辨认出你的呢</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<ul class="timeline animate-box">
						<li class="animate-box">
							<div class="timeline-badge" style="background-image:url(img/head-1.jpg);"></div>
							<div class="timeline-panel">
								<div class="timeline-heading">
									<h3 class="timeline-title">来很多很多场美妙的旅行</h3>
									<span class="date">December 25, 2015</span>
								</div>
								<div class="timeline-body">
									<p>
										人生路漫漫，但是却不乏味，去不同的地方旅行，去呼吸新的空气、
										感受不一样的环境，岂不妙哉，而这，我希望呀，是和你一起呢！
										走到每一个新的土地，就将你、我还有这美丽的世界留住，留在相机里，
										留在你我的心里
										(๑•́ωก̀๑)
									</p>
								</div>
							</div>
						</li>
						<li class="timeline-inverted animate-box">
							<div class="timeline-badge" style="background-image:url(img/head-2.jpg);"></div>
							<div class="timeline-panel">
								<div class="timeline-heading">
									<h3 class="timeline-title">共同进步呀~</h3>
									<span class="date">December 28, 2015</span>
								</div>
								<div class="timeline-body">
									<p>
										在一起一年了啊，这一年我们并未因恋爱而落后，同时呢，我也相信以后
										我们会往更好的方向进步，虽然呢，我们吵过架、分过手，但是呢，这都是
										过去式了，咱得向前看，冲冲冲，共同向未来冲鸭~~~~~(加波浪号充字数，哈哈)
										(๑•̀ㅂ•́)و✧
									</p>
								</div>
							</div>
						</li>
						<li class="animate-box">
							<div class="timeline-badge" style="background-image:url(img/head-3.jpg);"></div>
							<div class="timeline-panel">
								<div class="timeline-heading">
									<h3 class="timeline-title">还可以，一起追剧欧</h3>
									<span class="date">January 1, 2016</span>
								</div>
								<div class="timeline-body">
									<p>
										一个人追剧怎么行，有人一起吐槽的剧才有趣（当然，那个人得是我才行），
										躺在沙发上，手捧爆米花，打开沙雕剧，陪你一起笑、一起沙雕；打开爱情剧，
										陪你一起烂漫地幻想；还有啥（十脸懵逼），总之，我陪你，你不亏，嘿嘿<(￣︶￣)>
									</p>
								</div>
							</div>
						</li>
						<li class="timeline-inverted animate-box">
							<div class="timeline-badge" style="background-image:url(img/head-4.jpg);"></div>
							<div class="timeline-panel">
								<div class="timeline-heading">
									<h3 class="timeline-title">嘿嘿，一起沙雕也不错啊</h3>
									<span class="date">December 28, 2015</span>
								</div>
								<div class="timeline-body">
									<p>
										好了，我知道因为我的高冷引起了你的注意（说话我不行，吹牛第一名）；正所谓
										好看的皮囊万里挑一，有趣的灵魂一百多斤，加起来就两百多斤了；其实负负得正，
										两个一起沙雕，就不会那么沙雕了，只是会更沙雕了，哈哈(｡◕ˇ∀ˇ◕）
									</p>
								</div>
							</div>
						</li>
			    	</ul>
				</div>
			</div>
		</div>
		
		<div id="all-cover">
			<span class="fa fa-close" id="all-cover-close"></span>
		</div>
		<div class="container-fluid" id="photo-collection">
			<div class="row">
				<div class="col-md-12" id="photo-title">
					<h1>
						<span style="border-top: 1.5px solid #f14e95; border-bottom: 1.5px solid #f14e95;">
							小可爱！安排
						</span>
					</h1>
					<span>我愿你此生不知生活艰辛，笑中闪动的星光，皆因世间的爱和善</span>
				</div>
			</div>
			
			<div class="row" class="photo-img">
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-1.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-2.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-3.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-4.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-5.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-6.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-7.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-8.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 photo-box">
					<div style="position: relative;">
						<img src="img/photo-9.jpg" class="img-fluid" />
						<div id="photo-cover-up"></div>
						<div id="photo-cover-down">
							<span class="fa fa-arrows-alt"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<div class="container" id="me-you-container">
			<div class="row">
				<div class="col-md-12 text-center" id="me-you-text">
					<h3>From April 20th, 2019</h3>
					<h3>To April 20th, 2020</h3>
				</div>
			</div>
			<div class="row" style="position: relative;">
				<div class="col-xl-2 offset-xl-4 col-md-3 offset-md-3 col-sm-3 offset-sm-3 col-3 offset-3" id="me">
					<img src="img/me.jpg" class="img-fluid" />
				</div>
				<div id="me-heart-you" class="fa fa-heart"></div>
				<div class="col-xl-2 col-md-3 col-sm-3 col-3" id="you">
					<img src="img/you.jpg" class="img-fluid" />
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 text-center" id="me-you-text">
					<p>谨以此网页纪念陈&敏的恋爱一周年</p>
					<p>2020.4.20 Designed By CL</p>
				</div>
			</div>
		</div>
		





		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/simplyCountdown.js"></script>
		<script src="js/main.js"></script>

		<script>
			var d = new Date(new Date().getTime());
			
			// default example
			simplyCountdown('.simply-countdown-one', {
				year: d.getFullYear(),
				month: d.getMonth() + 1,
				day: d.getDate()
			});

			//jQuery example
			$('#simply-countdown-losange').simplyCountdown({
				year: d.getFullYear(),
				month: d.getMonth() + 1,
				day: d.getDate(),
				enableUtc: false
			});
		</script>
	</body>
</html>
